<template>
  <div id="CommodityContOne">
    <p>曹家小院</p>
    <ul>
      <li>
        <commodity1 :list="commodity1_list"></commodity1>
      </li>
      <li>
        <commodity2 :list="commodity2_list"></commodity2>
      </li>
    </ul>
    <p>每日购</p>
    <ul>
      <li>
        <commodity2 :shadeRp="'shadeRP'" :list="commodity3_list1"></commodity2>
        <commodity2 :shadeRo="'shadeRO'" :list="commodity3_list2"></commodity2>
        <commodity2 :shadeYg="'shadeYG'" :list="commodity3_list3"></commodity2>
        <commodity2 :shadePy="'shadePY'" :list="commodity3_list4"></commodity2>
      </li>
      <li>
        <commodity2 :shadeBo="'shadeBO'" :list="commodity3_list5"></commodity2>
        <commodity2 :shadePb="'shadePB'" :list="commodity3_list6"></commodity2>
        <commodity2 :shadeBg="'shadeBG'" :list="commodity3_list7"></commodity2>
        <commodity2 :shadeRo="'shadeRO'" :list="commodity3_list8"></commodity2>
      </li>
    </ul>
  </div>
</template>

<script>
import Commodity1 from '@/components/Subassembly/Commodity1'
import Commodity2 from '@/components/Subassembly/Commodity2'

export default {
  name: 'CommodityContOne',
  components: {
    'commodity1': Commodity1,
    'commodity2': Commodity2
  },
  data () {
    return {
      commodity1_list: [
        { title: '畅玩人生', details: '提着游戏机去春游', img1: 'https://s2.ax1x.com/2019/09/17/n4XhlR.jpg', img2: 'https://s2.ax1x.com/2019/09/17/n4XhlR.jpg' },
        { title: '育儿好物', details: '让萌宝健康成长', img1: 'https://s2.ax1x.com/2019/09/17/n4BkDO.jpg', img2: 'https://s2.ax1x.com/2019/09/17/n4BkDO.jpg' }

      ],
      commodity2_list: [
        { title: '时尚洗护', details: '净情生活', img: 'https://s2.ax1x.com/2019/09/17/n4jbD0.jpg' },
        { title: '海外好物', details: '嗨购全世界', img: 'https://s2.ax1x.com/2019/09/17/n4vDaT.jpg' },
        { title: '礼物暖人', details: '妙挑走心礼', img: 'https://s2.ax1x.com/2019/09/17/n4v4Z6.jpg' },
        { title: '意式家具', details: '意式极简', img: 'https://s2.ax1x.com/2019/09/17/n4v5dK.jpg' }
      ],
      commodity3_list1: [{ title: '免息星球', details: '白条免息购', img: '../../../../static/image/home/l6.jpg' }],
      commodity3_list2: [{ title: '品牌闪购', details: '够大牌好物', img: '../../../../static/image/home/l5.jpg' }],
      commodity3_list3: [{ title: '品牌秒杀', details: '低价抢大牌', img: '../../../../static/image/home/l3.jpg' }],
      commodity3_list4: [{ title: '京东直播', details: '好货即刻买', img: '../../../../static/image/home/l7.jpg' }],
      commodity3_list5: [{ title: '排行榜', details: '热销推荐', img: '../../../../static/image/home/l8.jpg' }],
      commodity3_list6: [{ title: '拍拍好物', details: 'iphone 5折起', img: '../../../../static/image/home/l1.jpg' }],
      commodity3_list7: [{ title: '新品首发', details: '华为P30', img: '../../../../static/image/home/l4.jpg' }],
      commodity3_list8: [{ title: '发现好货', details: '叫你买买买', img: '../../../../static/image/home/l2.jpg' }]
    }
  }
}
</script>

<style scoped>
#CommodityContOne p {
  text-align: center;
  letter-spacing: 20px;
  padding: 15px 0;
  font-weight: 900;
  font-size: 32px; /*px*/
  color: rgba(0, 0, 0, 0);
}
#CommodityContOne p:nth-of-type(1) {
  background: linear-gradient(left, rgba(255, 0, 0, 1), rgba(55, 225, 0, 1));
  -webkit-background-clip: text;
}
#CommodityContOne p:nth-of-type(2) {
  background: linear-gradient(left, rgba(0, 0, 255, 1), rgba(255, 0, 0, 1));
  -webkit-background-clip: text;
}
#CommodityContOne ul {
  border-radius: 30px;
  overflow: hidden;
  margin: 0 1.5%;
}
#CommodityContOne ul:nth-of-type(2) li {
  display: flex;
  justify-content: space-around;
}
</style>
